<template>
	<view >
		<image v-if="info.video==''" style="width: 100%;height: 414rpx;" :src="info.filepath"></image>
		<video v-if="showvideo" :src="info.video" style="width: 100%;height: 414rpx;" controls="true"></video>
		<view class="content">
		<view class="title">
			{{info.title || ""}}
		</view>
		<view  class="time" style="position: relative;">
		    {{create_time || ""}}
		    <view class="shoucang_btn" v-if="info.collect==1" @tap="shoucang()">
				<image src="../../static/images/shoucang-active.png"></image>
				取消收藏
			</view>
			<view class="shoucang_btn" v-if="info.collect==0" @tap="shoucang()">
				<image src="../../static/images/shoucang.png"></image>
				收藏
			</view>
		</view>
		<view class="article" v-html="content">
		</view>
	    <view class="goods-container" >
			<view class="goods-item"  v-if="showchanpin" :data-id="product.id" @tap="gogoodsinfo">
				<view class="goods-icon" style="margin-top: 0px;">
					<image :src="product.filepath"></image>
				</view>
				<view class="goodsinfo shangpin-info" >
					{{product.name}}
					
				</view>
			</view>
			<view class="goods-item" style="padding: 10rpx;" v-if="showshangpu" @tap="gostore" :data-id="merchant.id">
				<view class="store-name name2"><image src="../../static/images/store-icon.png"></image>{{merchant.name}}</view>
				<view class="goods-xiang">
					<view class="goods-icon " style="width: 104rpx;height: 104rpx;">
						<image :src="merchant.filepath"></image>
					</view>
					<view class="goodsinfo" style="width: 465rpx;">
						<view class="name phone-icon" @tap.stop="gophone(merchant.phone)">
							<image src="../../static/images/phone.png"></image>
							{{merchant.phone}}
						</view>
						<view class="name address-icon">
							<image src="../../static/images/address.png"></image>
							{{merchant.address}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	import {getlogin} from "@/static/js/login.js";
	import {timestampToDate1} from "@/static/js/login.js"
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
				    id:"",
					info:{},
					create_time:"",
					content:"",
					merchant:{},
					product:{},
					showchanpin:false,
					showshangpu:false,
					wxinfo_id:"",
					showvideo:false,
				}
			},
			onLoad(option) {
				let ss = uni.getStorageSync('user');
				if(ss){
					this.wxinfo_id=ss.wxinfo_id;
				}else{
					this.wxinfo_id=0;
				}
	            this.id = option.id;
				this.getdata()
			},
			methods: {
				/**
				 *收藏文章
				 */
				shoucang(){
					let userinfo= getlogin();
					if(userinfo){
						uni.request({
							url: httpPath.filePath+'/index/articlecollect/publish',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {id:this.id,wxinfo_id:this.wxinfo_id},
							success: (res) => {
								if(res.data.code==200){
									
									this.info.collect=1
								}else if(res.data.code==201){
									
									this.info.collect=0
								}  
							}
						});
					}
				},
				/**
				 * 推荐商品详情
				 */
				gogoodsinfo(e){
					uni.navigateTo({
						url:"../shopping/goodsinfo?id="+e.currentTarget.dataset.id
					})
				},
				/**
				 * 拨打电话
				 */
				gophone(phone){
					uni.makePhoneCall({
					    phoneNumber: phone //仅为示例
					});
				},
				/**
				 * 进入商铺详情
				 */
				gostore(e){
					uni.navigateTo({
						url:"../shopping/barinfo?id="+e.currentTarget.dataset.id
						// url:'../../shopping/barinfo?id='+e.currentTarget.dataset.id
					})
				},
				/**
				 * 获取数据
				 */
	           getdata(){
				    uni.request({
						url: httpPath.filePath+'/index/article/detail',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {id:this.id,wxinfo_id:this.wxinfo_id},
						success: (res) => {
							if(res.data.code==200){
								this.info=res.data.data.info;
								if(this.info.video!=""){
									this.showvideo=true;
								}
								this.create_time= timestampToDate1(this.info.create_time);
								// 详情
								var richtext=  this.info.description;
								const regex = new RegExp('<img', 'gi');
								//判断是否头图片
								if(richtext.indexOf('img') != -1){
								    richtext= richtext.replace(regex, `<img style="max-width: 100%;"`);
								}
								const imgurl = new RegExp('src="/ueditor','gi');
								if(richtext.indexOf('src="/ueditor') != -1){
								    richtext = richtext.replace(imgurl, 'src="https://www.hopbeer.cn/ueditor');
								}
								this.content = richtext;
								if(res.data.data.merchant){
									this.showshangpu=true;
									this.merchant=res.data.data.merchant;
								}
								if(res.data.data.product){
									this.showchanpin=true;
									this.product=res.data.data.product;
								}
							}
							   
						}
				   });
			   }
			}
		}
</script>

<style>
	.shoucang_btn{position: absolute;top: 0px;right: 0px;text-align: right;font-size: 28rpx;}
	.shoucang_btn image{width: 42rpx;height: 42rpx;vertical-align: middle;margin-right: 10rpx;}
	.shangpin-info{font-size: 32rpx;font-weight: bold;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;height: 180rpx;line-height:180rpx;color: #333333;}
	.content{padding: 32rpx;}
	.title{
		width:100%;
		font-size:36rpx;
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:43rpx;
	}
	.time{
	
	font-size:22rpx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(153,153,153,1);
	line-height:50rpx;}
	.article {line-height: 50rpx;font-size: 32rpx;margin-bottom: 30rpx;}
	.article image{width: 100%;}
	.goods-item{width:100%;
		height:195rpx;
		background:#F6F6F6;
		border-radius:12rpx;
		margin-bottom: 30rpx;
	}
	.goods-xiang{
		height:104rpx;	
	}
	.goods-item .goods-icon{width:195rpx ;height:195rpx;float: left;border-radius: 5px 5px 5px 5px;overflow: hidden;margin-top: 10rpx;}
	.goods-item .goods-icon image{width: 100%;height: 100%;}
	.goodsinfo{width:450rpx;float: left;padding-left: 20rpx;padding-top: 10rpx;}
	.goods-title{
		height: 66rpx;font-size: 30rpx;font-weight: bold;color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical; 
		-webkit-line-clamp: 2; 
		line-height: 33rpx;
	}
	.price{color: #FF5000;font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;}
	.name{font-size: 28rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-left: 30rpx;line-height: 60rpx;position: relative;}
	.name1 image{width: 27rpx;height: 24rpx;position:absolute;top: 20rpx; left: 0rpx;}
	.name2{margin-bottom: 10rpx;position: relative;padding-left: 50rpx;}
	.name2 image{width: 36rpx;height: 33rpx;position:absolute;top:10rpx; left: 5rpx;}
	.phone-icon image{width: 22rpx;height: 31rpx;position:absolute;top: 20rpx; left: 0rpx;}
	.address-icon image{width: 23rpx;height: 24rpx;position:absolute;top: 20rpx; left: 0rpx;}
</style>
